<template>
    <div class="roles">
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 卡片视图 -->
      <el-card>
        <div>
          <el-button type="primary">添加角色</el-button>
        </div>
        <!-- 角色表格 -->
        <el-table :data="rolesList" border stripe>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <!-- 循环生成一级的数据结构 scope.row.cildren: 一级的数据-->
              <el-row :class="['center','bd',index===0?'bt':'']" v-for="(item,index) in scope.row.children" :key="item.id">
                <!-- 渲染一级数据 -->
                <el-col :span="5">
                  <el-tag>{{item.authName}}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <!-- 循环生成二级和三级数据的结构 -->
                <el-col :span="19">
                  <!-- 循环生成二级的结构 -->
                  <el-row class="center" :class="index===0?'':'bt'" v-for="(item2,index) in item.children" :key="item2.id">
                    <!-- 渲染二级数据 -->
                    <el-col :span="6">
                      <el-tag type="success">{{item2.authName}}</el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <!-- 循环生成三级的结构 -->
                    <el-col :span="18">
                      <!-- 渲染三级的数据 -->
                      <el-tag closable @close="removeTag(item3.id,scope.row)" type="warning" v-for="item3 in item2.children" :key="item3.id">
                        {{ item3.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="角色名称" prop="roleName"></el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
              <el-button @click="showSetRights(scope.row)" type="warning" size="mini" icon="el-icon-setting">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 分配权限的对话框 -->
      <el-dialog
        title="分配权限"
        @close="closeSetRightDialog"
        :visible.sync="setRightsDialogVisible"
        width="50%">
        <!-- tree: data(绑定树形控件渲染的数据) props(控制将某一个字段渲染出来，数据嵌套通过什么字段)-->
        <el-tree 
          :data="rightsList" 
          :props="defaultProps"
          ref="treeRef"
          :default-expand-all="true"
          node-key="id"
          :default-checked-keys="defaultKeys"
          show-checkbox>
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setRightsDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="setRights">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  data() {
    return {
      rolesList: [],
      // 控制分配权限显示隐藏的数据
      setRightsDialogVisible: false,
      rightsList: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      // 设置默认树形控件选中的数据
      defaultKeys: [],
      roleId: 0
    }
  },

  created() {
    this.getRolesList()
  },

  methods: {
    // 获取角色列表
    async getRolesList() {
      const { data: res } = await this.$http.get('roles')
      if(res.meta.status !== 200) return this.$message.error('获取数据失败')
      this.rolesList = res.data
    },

    // 删除权限
    removeTag(rightsId,roleInfo) {
      // 弹出确认提示框
      console.log(rightsId,roleInfo)
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击了确定
        // 权限id: item3.id
        // 角色id: scope.row.id
        const {data: res} = await this.$http.delete(`roles/${roleInfo.id}/rights/${rightsId}`)

        if(res.meta.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        // res.data: 删除之后的当前角色所有的权限
        // 页面渲染所有的权限：scope.row.children就是所有的权限  roleInfo.children
        roleInfo.children = res.data

      }).catch(() => {
        this.$message('已取消删除');          
      });
    },

    // 获取权限列表
    async getRightsList() {
      const { data: res } = await this.$http.get('rights/tree')
      if(res.meta.status !== 200) return this.$message.error('获取数据失败')
      this.rightsList = res.data
    },

    // 显示分配权限对话框
    showSetRights(row) {
      console.log(row)
      this.roleId = row.id
      this.setRightsDialogVisible = true
      this.getRightsList()
      // 传递一级权限数据
      this.getAllid(row)
    },

    // 定义递归函数来获取三级分类id
    getAllid(row) {
      // 如果循环到3及权限结束,判断是否有children
      if(!row.children){
        this.defaultKeys.push(row.id)
        return
      }
      // 第一次调用：row.children = 一级权限的数据
      // 第二次调用：row.children = 二级权限的数据
      // 第三次调用：row.children = 三级权限的数据
      row.children.forEach(item => {
        this.getAllid(item)
      });
    },

    // 关闭分配权限对话框
    closeSetRightDialog() {
      this.defaultKeys = []
    },

    // 分配权限
    async setRights() {
      // 发送请求roles/:roleId/rights  
      // 角色Id 点击分配权限获取到角色id存储到data中
      
     
      // this.$refs.treeRef.getCheckedKeys() 获取到3级权限选中的id数据
      // this.$refs.treeRef.getHalfCheckedKeys() 获取到选中的父级的id数据

      // 权限id
      const allId = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]

      // 发送请求分配权限
      const {data: res} = await this.$http.post(`roles/${this.roleId}/rights`,{
        rids: allId.join(',')
      })

      // 请求失败
      if(res.meta.status !== 200) return this.$message.error('更新失败')

      // 请求成功
      this.$message.success('更新成功')
      this.setRightsDialogVisible = false
      this.getRolesList()
    }
  }
};
</script>

<style scoped lang='less'>
.el-tag{
  margin: 7px;
}

.bt{
  border-top:1px solid #eee;
}
.bd{
  border-bottom:1px solid #eee;
}

.center{
  display: flex;
  align-items: center;
}



</style>
